import { Button, Checkbox, Form, Input } from 'antd'
import React from 'react'

export default function AntdForm() {
  //1. 获取 form 对象
  const [form] = Form.useForm();

  //表单提交时的回调
  let finish = () => {
    //3. 调用方法获得表单数据
    let values = form.getFieldsValue();
    console.log(values);
  }

  return (
    <Form
      // 2. 设置 form 属性
      form={form}
      name="basic"
      labelCol={{ span: 3 }}
      wrapperCol={{ span: 10 }}
      initialValues={{ remember: false}}
      onFinish={finish}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="user" 
        rules={[{ required: true, message: '用户名不能为空' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="pass"
        rules={[{ required: true, message: '密码不能为空' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 3, span: 16 }}>
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
        <Button type="primary" htmlType="submit">
          登录
        </Button>
        <Button type="primary" htmlType="reset">
          重置
        </Button>
      </Form.Item>
    </Form>
  )
}
